var vm = new Vue({
	el:'#example',
	data:{
		message:'hello'
	},
	computed:{
		// 计算属性 getter
		reversedMessageComputed: function() {
			// this 指向 vm 实例
			// 反转字符串
			return this.message.split('').reverse().join('')
		}
	},
	//在组件中
	methods:{
		reversedMessage: function() {
			return this.message.split('').reverse().join('')
		}
	},
	/**
	 * 注：
	 * 1、同一个Vue例中，函数名不能相同
	 * 2、在同一个Vue实例中，可以将同一个函数定义为一个方法而不是一个计算属性，最终的结果相同。不同的是
	 * 		计算属性是基于它们的依赖进行缓存的。
	 * 	只在想着依赖发生改变时才会求值。这就意味着只要 message 还没发生改变，多次访问 reversedMessage 计算属
	 * 	性会立即返回之前的计算结果，而不必再次执行函数。
	 * 	相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
	 */
})
/********计算属性VS侦听属性**********/
//侦听属性
var vm1 = new Vue({
	el:"#demo",
	data:{
		firstName:"Foo",
		lastName:"Bar",
		fullName:"Foo Bar"
	},
	/**
	 *	当需要在数据变化时执行异步或开销较大的操作时，watch（侦听器）是最有用的。 
	 */
	watch:{
		firstName: function(val){
			this.fullName = val + " " + this.lastName
		},
		lastName: function(val){
			this.fullName = this.firstName + " " + val
		}
	},
	
})

//计算属性
var vm1_1 = new Vue({
	el:"#demo",
	data:{
		firstName:"Foo",
		lastName:"Bar"
	},
	computed:{
		fullName:{
			//getter
			get:function(){
				return this.firstName + " " + this.lastName
				
			},
			//setter
			set:function(newValue){
				var names = newValue.split(" ")
				this.firstName = names[0]
				this.lastName = names[names.length - 1]
			}
			
		}
	}
})
/**
 * 注：
 * 同一个标签尽量不要同时使用计算属性和侦听属性
 */